<template>
  <div class="participant-detail-container">
    <div class="page-header">
      <div class="header-title">
        <el-icon><User /></el-icon>
        <span>参保人员费用明细详情</span>
      </div>
      <div class="header-actions">
        <el-button size="small" @click="goBack">
          <el-icon><Back /></el-icon>
          返回列表
        </el-button>
      </div>
    </div>

    <!-- 基本信息区域 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
          <el-tag type="success" v-if="participantInfo.status === '在职'">在职人员</el-tag>
          <el-tag type="warning" v-else>退休人员</el-tag>
        </div>
      </template>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ participantInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">性别：</span>
          <span class="value">{{ participantInfo.gender }}</span>
        </div>
        <div class="info-item">
          <span class="label">住院号：</span>
          <span class="value">{{ participantInfo.hospitalNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">身份证号：</span>
          <span class="value">{{ participantInfo.idCard }}</span>
        </div>
        <div class="info-item">
          <span class="label">入院日期：</span>
          <span class="value">{{ participantInfo.admissionDate }}</span>
        </div>
        <div class="info-item">
          <span class="label">结算类别：</span>
          <span class="value">{{ participantInfo.settlementType }}</span>
        </div>
        <div class="info-item">
          <span class="label">家庭住址：</span>
          <span class="value">{{ participantInfo.address }}</span>
        </div>
        <div class="info-item">
          <span class="label">总费用：</span>
          <span class="value highlight">{{ formatCurrency(participantInfo.totalExpense) }}</span>
        </div>
      </div>
    </el-card>

    <!-- 费用统计图表区域 -->
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>药品费用占比</span>
              </div>
            </template>
            <div class="chart" ref="drugChartRef"></div>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color" style="background-color: #4e79a7;"></span>
                <span class="legend-text">门诊药品</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #f28e2c;"></span>
                <span class="legend-text">住院药品</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #e15759;"></span>
                <span class="legend-text">特殊药品</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>费用报销占比</span>
              </div>
            </template>
            <div class="chart" ref="expenseChartRef"></div>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color" style="background-color: #4e79a7;"></span>
                <span class="legend-text">医保报销</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #f28e2c;"></span>
                <span class="legend-text">个人支付</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #e15759;"></span>
                <span class="legend-text">其他支付</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 费用明细表格区域 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>费用明细</span>
          <div class="header-actions">
            <el-radio-group v-model="activeTab" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="drug">药品费用</el-radio-button>
              <el-radio-button label="treatment">诊疗费用</el-radio-button>
              <el-radio-button label="service">服务费用</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>

      <el-table :data="filteredExpenseItems" stripe style="width: 100%" border>
        <el-table-column prop="category" label="费用类别" width="120" />
        <el-table-column prop="name" label="项目名称" min-width="180" />
        <el-table-column prop="specification" label="规格" width="150" />
        <el-table-column prop="manufacturer" label="生产厂家" min-width="180" />
        <el-table-column prop="price" label="单价" width="100">
          <template #default="scope">
            {{ formatCurrency(scope.row.price) }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.amount) }}
          </template>
        </el-table-column>
        <el-table-column prop="insurance" label="医保支付" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.insurance) }}
          </template>
        </el-table-column>
        <el-table-column prop="personal" label="个人支付" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.personal) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="summary-section">
        <div class="summary-item">
          <span class="label">总金额：</span>
          <span class="value">{{ formatCurrency(totalAmount) }}</span>
        </div>
        <div class="summary-item">
          <span class="label">医保支付：</span>
          <span class="value">{{ formatCurrency(insuranceAmount) }}</span>
        </div>
        <div class="summary-item">
          <span class="label">个人支付：</span>
          <span class="value highlight">{{ formatCurrency(personalAmount) }}</span>
        </div>
      </div>
    </el-card>

    <!-- 报销比例信息 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>报销比例信息</span>
        </div>
      </template>

      <el-table :data="reimbursementRatios" stripe style="width: 100%" border>
        <el-table-column prop="startAmount" label="起付线" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.startAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="endAmount" label="等级线" width="120">
          <template #default="scope">
            {{ formatCurrency(scope.row.endAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="ratio" label="报销比例" width="120">
          <template #default="scope">
            {{ scope.row.ratio }}%
          </template>
        </el-table-column>
        <el-table-column prop="hospitalLevel" label="医院等级" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status === '启用'">启用</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleReimburse" :disabled="participantInfo.reimbursementStatus === '已报销'">
        <el-icon><Check /></el-icon>确认报销
      </el-button>
      <el-button @click="handlePrint">
        <el-icon><Printer /></el-icon>打印明细
      </el-button>
      <el-button type="info" @click="goBack">
        <el-icon><Back /></el-icon>返回
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { User, Back, Check, Printer } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();
const drugChartRef = ref(null);
const expenseChartRef = ref(null);
const activeTab = ref('all');

// 参保人员基本信息
const participantInfo = ref({
  id: 1,
  name: '夏浩兴',
  gender: '男',
  hospitalNo: '1000001',
  idCard: '123123200007011234',
  admissionDate: '2022-10-28 02:10:33',
  settlementType: '医保',
  address: '沈阳市',
  status: '在职',
  totalExpense: 8754.50,
  reimbursementStatus: '待报销'
});

// 费用明细数据
const expenseItems = ref([
  { 
    id: 1, 
    category: '药品', 
    name: '阿莫西林胶囊', 
    specification: '0.25g*24粒/盒', 
    manufacturer: 'Amoxicillin Capsules United Limited',
    price: 15.50, 
    quantity: 2, 
    amount: 31.00, 
    insurance: 27.90, 
    personal: 3.10,
    type: 'drug'
  },
  { 
    id: 2, 
    category: '药品', 
    name: '头孢克洛胶囊', 
    specification: '0.25g*6粒/盒', 
    manufacturer: 'Amoxicillin Capsules United Limited',
    price: 45.60, 
    quantity: 6, 
    amount: 273.60, 
    insurance: 246.24, 
    personal: 27.36,
    type: 'drug'
  },
  { 
    id: 3, 
    category: '诊疗项目', 
    name: '血常规检查', 
    specification: '次', 
    manufacturer: '医院检验科',
    price: 35.00, 
    quantity: 2, 
    amount: 70.00, 
    insurance: 63.00, 
    personal: 7.00,
    type: 'treatment'
  },
  { 
    id: 4, 
    category: '诊疗项目', 
    name: 'X光检查', 
    specification: '次', 
    manufacturer: '医院放射科',
    price: 120.00, 
    quantity: 1, 
    amount: 120.00, 
    insurance: 108.00, 
    personal: 12.00,
    type: 'treatment'
  },
  { 
    id: 5, 
    category: '医疗服务', 
    name: '住院床位费', 
    specification: '天', 
    manufacturer: '医院住院部',
    price: 60.00, 
    quantity: 5, 
    amount: 300.00, 
    insurance: 270.00, 
    personal: 30.00,
    type: 'service'
  },
  { 
    id: 6, 
    category: '医疗服务', 
    name: '护理费', 
    specification: '天', 
    manufacturer: '医院住院部',
    price: 25.00, 
    quantity: 5, 
    amount: 125.00, 
    insurance: 112.50, 
    personal: 12.50,
    type: 'service'
  }
]);

// 报销比例数据
const reimbursementRatios = ref([
  { id: 1, startAmount: 1300, endAmount: 30000, ratio: 91, hospitalLevel: '三级医院', status: '启用' },
  { id: 2, startAmount: 30000, endAmount: 40000, ratio: 94, hospitalLevel: '三级医院', status: '启用' },
  { id: 3, startAmount: 1300, endAmount: 30000, ratio: 93, hospitalLevel: '二级医院', status: '启用' },
  { id: 4, startAmount: 1300, endAmount: 30000, ratio: 95, hospitalLevel: '一级医院', status: '启用' }
]);

// 过滤后的费用明细
const filteredExpenseItems = computed(() => {
  if (activeTab.value === 'all') {
    return expenseItems.value;
  }
  return expenseItems.value.filter(item => item.type === activeTab.value);
});

// 计算总金额
const totalAmount = computed(() => {
  return expenseItems.value.reduce((sum, item) => sum + item.amount, 0);
});

// 计算医保支付金额
const insuranceAmount = computed(() => {
  return expenseItems.value.reduce((sum, item) => sum + item.insurance, 0);
});

// 计算个人支付金额
const personalAmount = computed(() => {
  return expenseItems.value.reduce((sum, item) => sum + item.personal, 0);
});

// 格式化货币
const formatCurrency = (value) => {
  return `¥ ${value.toFixed(2)}`;
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 处理报销
const handleReimburse = () => {
  ElMessageBox.confirm('确认为该参保人员进行费用报销吗？', '报销确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    participantInfo.value.reimbursementStatus = '已报销';
    ElMessage({
      type: 'success',
      message: '报销成功！'
    });
  }).catch(() => {
    // 取消操作
  });
};

// 处理打印
const handlePrint = () => {
  ElMessage({
    type: 'info',
    message: '正在准备打印...'
  });
  // 这里添加打印逻辑
};

// 初始化图表
const initCharts = () => {
  // 药品费用占比图表
  const drugChart = echarts.init(drugChartRef.value);
  const drugOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '药品费用',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 304.60, name: '门诊药品' },
          { value: 450.00, name: '住院药品' },
          { value: 120.00, name: '特殊药品' }
        ]
      }
    ]
  };
  drugChart.setOption(drugOption);

  // 费用报销占比图表
  const expenseChart = echarts.init(expenseChartRef.value);
  const expenseOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '费用报销',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 827.64, name: '医保报销' },
          { value: 91.96, name: '个人支付' },
          { value: 0, name: '其他支付' }
        ]
      }
    ]
  };
  expenseChart.setOption(expenseOption);

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    drugChart.resize();
    expenseChart.resize();
  });
};

onMounted(() => {
  initCharts();
});
</script>

<style scoped>
.participant-detail-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
}

.info-item .label {
  font-weight: 500;
  color: #606266;
  width: 80px;
}

.info-item .value {
  color: #303133;
}

.info-item .value.highlight {
  color: #f56c6c;
  font-weight: 600;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-card {
  height: 380px;
}

.chart {
  height: 250px;
  margin-bottom: 15px;
}

.chart-legend {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  flex-wrap: wrap;
  padding: 5px 10px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 5px 15px;
  min-width: 80px;
}

.legend-color {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 2px;
}

.legend-text {
  font-size: 12px; /* Adjust font size for legend text */
  white-space: nowrap; /* Prevent text wrapping */
}

.summary-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.summary-item {
  margin-left: 30px;
  font-size: 14px;
}

.summary-item .label {
  font-weight: 500;
  color: #606266;
}

.summary-item .value {
  font-weight: 600;
  color: #303133;
}

.summary-item .value.highlight {
  color: #f56c6c;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 15px;
}
</style> 